<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover" />
    <title>资质审查</title>
    <link rel="stylesheet" href="../css/vant.css">
    <link rel="stylesheet" href="./css/step2.css">
    <style>
        .uploadImg>.van-image__img,
        .uploadImg>.van-uploader__preview-image {
            width: 1.8667rem;
            height: 1.8667rem;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="topBox">
            <van-nav-bar title="进度" left-text="返回" left-arrow @click-left="onClickLeft"></van-nav-bar>
            <!-- 步骤条 -->
            <div class="stepsBox">
                <van-steps :active="active" @click-step="clickStep">
                    <van-step>资质审核</van-step>
                    <van-step>价格对比</van-step>
                    <van-step>产品体验</van-step>
                    <van-step>验厂</van-step>
                </van-steps>
            </div>
        </div>

        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">

            <!-- 资质审核 -->
            <div v-if="active==0" class="ziZhiBox">
                <div class="btnBox">
                    <van-button type="primary" @click="uploadHandle(1)">完善资质</van-button>
                </div>

            </div>

            <!-- 价格对比 -->
            <div v-if="active==1" class="priceBox">
                <template v-if="proList.length!=0">
                    <div class="imgBox" v-for="(item,index) in proList" :key="index">
                        <div class="title">{{item.qualProductName}}</div>
                        <div class="fieldBox">
                            <van-field type="number" v-model="item.supplyPrice" @input="inputHandle(index)" label="供货价"
                                placeholder="请输入申请人公司的供货价" input-align="right" :readonly="!item.isFirst" />
                        </div>
                        <template v-if="item.supplyPrice>0">
                            <div class="fieldBox1" v-if="item.bottomJd">
                                <span>京东最低价</span><span>{{item.bottomJd}}</span>
                                <span>
                                    <van-icon name="arrow-up" v-if="item.JDPercent<0" color="#ED0A2B"></van-icon>
                                    <van-icon name="minus" v-if="item.JDPercent==0" color="#1989fa"></van-icon>
                                    <van-icon name="arrow-down" v-if="item.JDPercent>0" color="#096DEB"></van-icon>
                                    {{Math.abs(item.JDPercent).toFixed(2)}}%
                                </span>
                            </div>
                            <div class="fieldBox1" v-if="item.bottomPdd">
                                <span>拼多多最低价</span><span>{{item.bottomPdd}}</span>
                                <span>
                                    <van-icon name="arrow-up" v-if="item.PDDPercent<0" color="#ED0A2B"></van-icon>
                                    <van-icon name="minus" v-if="item.PDDPercent==0" color="#1989fa"></van-icon>
                                    <van-icon name="arrow-down" v-if="item.PDDPercent>0" color="#096DEB"></van-icon>
                                    {{Math.abs(item.PDDPercent).toFixed(2)}}% </span>
                            </div>
                            <div class="fieldBox1" v-if="item.bottomPrice">
                                <span>淘宝最低价</span><span>{{item.bottomPrice}}</span>
                                <span>
                                    <van-icon name="arrow-up" v-if="item.TBPercent<0" color="#ED0A2B"></van-icon>
                                    <van-icon name="minus" v-if="item.TBPercent==0" color="#1989fa"></van-icon>
                                    <van-icon name="arrow-down" v-if="item.TBPercent>0" color="#096DEB"></van-icon>
                                    {{Math.abs(item.TBPercent).toFixed(2)}}%
                                </span>
                            </div>
                            <div class="priceTip" v-if="item.supplyPrice != '' && item.lowPrice != 0">
                                <div>
                                    提示：<span :class="item.isCooperate?'':'redText'">
                                        <template v-if="item.isCooperate">
                                            低于全网最低价{{Math.abs(item.LowPercent).toFixed(2)}}%，可以合作
                                        </template>
                                        <template v-else>
                                            供货价高于全网最低价{{Math.abs(item.LowPercent).toFixed(2)}}%，不合作
                                        </template>
                                    </span>
                                </div>
                            </div>
                        </template>
                        <div class="saveBtnBox">
                            <van-button type="primary" size="small" @click="savePrice(item)"
                                v-if="item.isFirst">提交价格</van-button>
                            <van-button type="primary" size="small" @click="editHandle(item)"
                                v-else="item.isFirst">申请修改</van-button>
                        </div>
                        <div class="applyBox"
                            v-if="item.supplyPrice && item.newPrice!=null&&item.newPrice!=item.supplyPrice">
                            <div>
                                <van-tag type="primary" v-if="item.note==1">审核中</van-tag>
                                <van-tag type="success" v-else-if="item.note==0">审核通过</van-tag>
                                <van-tag type="danger" v-else-if="item.note==2">审核驳回</van-tag>
                                <!-- <span>
                                <template v-if="item.note==1">
                                    请耐心等待
                                </template>
                                <template v-if="item.note==0&&item.cause">
                                    备注：{{item.cause}}
                                </template>
                                <template v-if="item.note==2">
                                    驳回原因：{{item.cause}}
                                </template>
                            </span> -->
                            </div>
                            <span>申请修改的价格为：{{item.newPrice}}</span>
                        </div>
                    </div>
                </template>
                <div v-else class="emptyBox">
                    <img src="./img/zanwu.png" alt="">
                    暂无产品信息
                </div>
            </div>

            <!-- 产品体验 -->
            <div v-if="active==2" class="tiBox">
                <div class="tabBox" v-if="tiProList.length!=0">
                    <div class="tabTop tabLine">
                        <span>
                            <van-checkbox v-model="checkAll" icon-size="14px" @click="checkAllHandle"></van-checkbox>
                        </span>
                        <span>产品</span>
                        <span>体验方式</span>
                        <span>备注</span>
                        <span>评价</span>
                    </div>
                    <div class="tabLine" v-for="(item,index) in tiProList" :key="index">
                        <span @click="selectPro(index)">
                            <van-checkbox v-model="item.isCheck" icon-size="14px"
                                :disabled="item.transmitMode"></van-checkbox>
                        </span>
                        <span>{{item.qualProductName}}</span>
                        <span>{{item.transmitMode==1?'物流':item.transmitMode==0?'送到公司':''}}</span>
                        <span>{{item.courierNumber}}</span>
                        <span>{{item.appraise}}</span>
                    </div>
                </div>
                <div v-else class="emptyBox">
                    <img src="./img/zanwu.png" alt="">
                    暂无产品信息
                </div>
            </div>

            <!-- 验厂 -->
            <div v-if="active==3" class="yanBox">
                <div class="tabBox" v-if="comList.length!=0">
                    <div class="tabTop tabLine tabLine1">
                        <span>企业</span>
                        <span>状态</span>
                        <span>审核意见</span>
                    </div>
                    <div class="tabLine tabLine1" v-for="(item,index) in comList" :key="index">
                        <span>{{item.companyName}}</span>
                        <span>{{item.state==1?'验证通过':item.state==2?'未验证通过':'待验厂'}}</span>
                        <span>{{item.suggestion}}</span>
                    </div>
                </div>
                <div v-else class="emptyBox">
                    <img src="./img/zanwu.png" alt="">
                    暂无企业信息
                </div>
            </div>


            <div class="save" v-if="active==2&&tiProList.length!=0">
                <button class="saveBtn" type="button" @click="saveHandle">
                    体验产品
                </button>
            </div>
        </van-pull-refresh>



        <!-- 体验方式弹窗 -->
        <van-popup v-model="showTiyan" closeable round>
            <div class="tiyanBox">
                <div class="tiTitle">体验产品方式</div>
                <van-form>
                    <van-field name="radio" label="体验方式" input-align="right">
                        <template #input>
                            <van-radio-group v-model="tiYanForm.type" direction="horizontal">
                                <van-radio name="0">送到公司</van-radio>
                                <van-radio name="1">物流</van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>
                    <van-field v-model="tiYanForm.note" :label="tiYanForm.type==1?'物流单号':'备注'"
                        :placeholder="tiYanForm.type==1?'请输入物流单号':'请输入备注'" input-align="right" />
                </van-form>
                <div class="tiBtn">
                    <van-button round block type="info" @click="onSubmit">提交</van-button>
                </div>
            </div>
        </van-popup>


        <!-- 修改产品价格申请弹窗 -->
        <van-popup v-model="showPrice" closeable round>
            <div class="tiyanBox">
                <div class="tiTitle">修改价格</div>
                <van-form>
                    <van-field v-model="newPrice" type="number" label="产品价格" placeholder="请输入新的价格"
                        input-align="right" />
                </van-form>
                <div class="tiBtn">
                    <van-button round block type="info" @click="submitProPrice">提交</van-button>
                </div>
            </div>
        </van-popup>



        <div class="mask" v-if="mask">
            <img src="../img/load.gif">
        </div>
    </div>


    <script src="../js/vue.min.js"></script>
    <script src="../js/flex_ible/lib-flexible.js"></script>
    <script src="../js/vue-lazyload.js"></script>
    <script src="../js/vant.min.js"></script>
    <script src="../js/vue-lazyload.js"></script>
    <script src="../js/mui.min.js"></script>
    <script src="./js/url.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/ajax.js"></script>
    <script>



        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }


        var userId = GetQueryString("userId");
        var recordId = GetQueryString("recordId");
        // alert(userId)
        // alert(recordId)



        Vue.use(VueLazyload);
        var vm = new Vue({
            el: "#app",
            data: {
                mask: false,
                active: 0,// 步骤条
                list: [],

                showType: false,// 产品类型弹窗
                actions: [],
                proList: [],

                supplyPrice: '',// 价格
                bottomPrice: '',// 全网最低价
                isCooperate: true,// 是否具备合作意向

                selectIndex1: '', // 选择产品类型  企业索引
                selectIndex2: '',// 选择产品类型   类型索引

                typeId: 0,// 上传图片时 所在分类和id
                ziZhiId: 0,// 上传图片时 所对应资质的id


                recordId: '',// 主信息

                tiProList: [],// 可进行体验的产品列表
                checkAll: false,// 勾选全部体验产品
                showTiyan: false,// 展示体验方式弹窗

                tiYanForm: {  // 产品体验 信息表单
                    type: '',
                    note: '',
                    ids: ''
                },

                comList: [],//  公司列表

                showPrice: false,// 显示修改价格弹窗

                editPro: '',//当前要修改价格的产品信息
                newPrice: '',
                isLoading: false,


            },
            created() {

                if (recordId != null) {
                    this.recordId = recordId
                    localStorage.recordId = recordId
                    localStorage.recordUserId = userId
                } else if (localStorage.recordId) {
                    this.recordId = localStorage.recordId
                    console.log(this.recordId);
                }

                this.getComList()
                this.getProductList()


            },
            methods: {
                onRefresh() {
                    this.isLoading = true
                    this.getComList()
                    this.getProductList()
                },
                submitProPrice() {
                    console.log(this.editPro);
                    if (this.newPrice == '') {
                        this.$toast('请输入新的价格')
                        return
                    }
                    if (this.newPrice == this.editPro.supplyPrice) {
                        this.$toast('新的价格不能与当前价格相同')
                        return
                    }
                    console.log(this.editPro);
                    var that = this;
                    this.mask = true
                    ajax({
                        url: newUrl + "qual/editQualComEcper",
                        type: 'post',
                        data: {
                            comExperId: that.editPro.comExperId,
                            supplyPrice: that.editPro.supplyPrice,
                            newPrice: that.newPrice,
                            qualId: that.editPro.qualId,
                            note: 1
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res)
                            console.log(res);
                            if (res.flag) {
                                that.$toast('提交成功')
                                that.mask = false
                                that.showPrice = false
                                that.editPro.newPrice = that.newPrice
                                that.getProductList()
                                that.newPrice = ''
                            } else {
                                that.$toast('提交失败')
                            }
                        },
                    })
                },

                // 修改产品价格
                editHandle(obj) {
                    this.editPro = obj
                    this.newPrice = obj.supplyPrice
                    this.showPrice = true

                },

                // 获取该记录的公司列表
                getComList() {
                    var that = this;
                    this.mask = true
                    ajax({
                        url: newUrl + "qual/getQualCompanyListByRecordId",
                        type: 'post',
                        data: {
                            recordId: that.recordId
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res)
                            console.log(res);
                            that.mask = false
                            that.isLoading = false
                            if (res.flag) {
                                // qualFile
                                that.comList = res.data
                                console.log(that.comList);
                            }
                        },
                    })


                },
                // 返回
                onClickLeft() {
                    window.location.href = './into.html'
                },

                // 体验表单提交
                onSubmit() {

                    if (this.tiYanForm.type == '') {
                        this.$toast('请选择体验方式')
                        return
                    }
                    if (this.tiYanForm.type == 1 && this.tiYanForm.note == '') {
                        this.$toast('请输入物流单号')
                        return
                    }

                    var that = this;
                    this.mask = true
                    ajax({
                        url: newUrl + "qual/editQualComEcperCou",
                        type: 'post',
                        data: {
                            ids: that.tiYanForm.ids,
                            transmitMode: that.tiYanForm.type,
                            courierNumbers: that.tiYanForm.note,
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res)
                            console.log(res);
                            if (res.flag) {
                                that.$toast('提交成功')
                                that.mask = false
                                that.getProductList()
                                that.showTiyan = false
                                that.tiYanForm = {
                                    type: '',
                                    note: '',
                                    ids: ''
                                }

                            } else {
                                that.$toast('提交失败')
                            }
                        },
                    })
                    console.log(this.tiYanForm);
                },

                // 勾选要体验的商品
                selectPro(index) {
                    console.log(index);

                    if (this.tiProList[index].transmitMode != null) {
                        return
                    }
                    this.tiProList[index].isCheck = !this.tiProList[index].isCheck
                    this.checkAll = this.tiProList.every(item => {
                        return item.isCheck
                    })
                    this.$forceUpdate()
                },

                // 全选 体验产品
                checkAllHandle() {
                    var that = this;
                    console.log(this.checkAll);
                    this.tiProList.forEach(item => {
                        if (item.transmitMode != null) {
                            return
                        }
                        item.isCheck = that.checkAll
                    })
                    this.$forceUpdate()

                },

                // 保存产品对比价格
                savePrice(obj) {
                    console.log(obj);
                    // return
                    if (obj.supplyPrice == '') {
                        that.$toast('请输入供货价')
                        return
                    }
                    // if (obj.bottomPrice == '') {
                    //     that.$toast('请输入全网最低价')
                    //     return
                    // }

                    var that = this;
                    this.mask = true
                    ajax({
                        url: newUrl + "qual/editQualComEcper",
                        type: 'post',
                        data: {
                            comExperId: obj.comExperId,
                            supplyPrice: obj.supplyPrice,
                            note: 1,
                            newPrice: obj.supplyPrice,
                            // bottomPrice: obj.bottomPrice,
                            qualId: obj.qualId
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res)
                            console.log(res);
                            if (res.flag) {
                                that.$toast('提交成功')
                                that.mask = false
                                that.getProductList()
                            } else {
                                that.$toast('提交失败')
                            }
                        },
                    })
                },

                // 跳转到 公司资质维护页
                uploadHandle() {
                    window.location.href = './infoList.html'
                },


                // 输入价格 
                inputHandle(index) {
                    console.log(this.proList[index]);
                    console.log(index);
                    console.log(this.proList);
                    // if (this.proList[index].isFirst) {
                    //     this.proList[index].newPrice = this.proList[index].supplyPrice
                    // }
                    if (this.proList[index].supplyPrice != '' && this.proList[index].lowPrice != '') {

                        this.proList[index].JDPercent = (this.proList[index].bottomJd - this.proList[index].supplyPrice) / this.proList[index].supplyPrice * 100
                        this.proList[index].PDDPercent = (this.proList[index].bottomPdd - this.proList[index].supplyPrice) / this.proList[index].supplyPrice * 100
                        this.proList[index].TBPercent = (this.proList[index].bottomPrice - this.proList[index].supplyPrice) / this.proList[index].supplyPrice * 100
                        this.proList[index].LowPercent = (this.proList[index].lowPrice - this.proList[index].supplyPrice) / this.proList[index].supplyPrice * 100

                        this.proList[index].isCooperate = Number(this.proList[index].supplyPrice) < Number(this.proList[index].lowPrice)
                    }
                },
                // 点击步骤条
                clickStep(index) {
                    console.log(index);
                    this.active = index

                },


                getProductList() {
                    var that = this, list = [];
                    this.mask = true;
                    ajax({
                        url: newUrl + "qual/getQualComEcper",
                        type: 'post',
                        data: {
                            recordId: that.recordId
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res)
                            console.log(res);
                            that.isLoading = false
                            if (res.flag) {
                                console.log(res.data);
                                list = res.data.sort((a, b) => {
                                    return b.comExperId - a.comExperId
                                })
                                ajax({
                                    url: newUrl + "qual/getQualMaterialListByRecordId",
                                    type: 'post',
                                    data: {
                                        recordId: that.recordId
                                    },
                                    dataType: 'json',
                                    timeout: 10000,
                                    contentType: "application/json",
                                    success: function (res) {
                                        var res = JSON.parse(res)
                                        console.log(res);
                                        if (res.flag) {
                                            console.log(res.data);
                                            console.log(list);
                                            res.data = res.data.filter(item => {
                                                return item.status == 1
                                            })

                                            list.forEach(item => {
                                                item.isFirst = !item.supplyPrice
                                                res.data.forEach(ele => {
                                                    if (ele.qualId == item.qualId) {
                                                        item.isCooperate = ''
                                                        item.qualProductName = ele.qualProductName
                                                    }
                                                })
                                            })


                                            that.proList = list.filter(item => {
                                                return item.qualProductName
                                            })

                                            console.log(that.proList);

                                            var arr = [];
                                            that.proList.forEach(item => {
                                                if (arr.length == 0) {
                                                    arr.push(item)
                                                } else {
                                                    if (!arr.some(ele => {
                                                        return ele.qualProductName == item.qualProductName
                                                    })) {
                                                        console.log(arr);
                                                        console.log(item);
                                                        arr.push(item)
                                                    }
                                                }
                                            })
                                            console.log(arr);
                                            that.proList = arr




                                            that.tiProList = that.proList.filter(item => {


                                                if (item.bottomPdd == null && item.bottomJd == null && item.bottomPrice == null) {
                                                    item.lowPrice = 0
                                                } else {
                                                    item.lowPrice = Math.min(item.bottomPdd || 99999, item.bottomJd || 99999, item.bottomPrice || 99999)
                                                }
                                                item.JDPercent = (item.bottomJd - item.supplyPrice) / item.supplyPrice * 100
                                                item.PDDPercent = (item.bottomPdd - item.supplyPrice) / item.supplyPrice * 100
                                                item.TBPercent = (item.bottomPrice - item.supplyPrice) / item.supplyPrice * 100
                                                item.LowPercent = (item.lowPrice - item.supplyPrice) / item.supplyPrice * 100

                                                if (item.supplyPrice) {
                                                    item.isCooperate = item.lowPrice > item.supplyPrice
                                                }

                                                console.log(item);

                                                item.isCheck = false
                                                return item.lowPrice > item.supplyPrice
                                            })
                                            that.mask = false
                                        }
                                    },
                                })

                            }
                        },
                    })




                },

                saveHandle() {
                    // 资质审核
                    if (this.active == 0) {
                        console.log(this.list);
                    } else if (this.active == 2) {  //体验产品
                        if (this.tiProList.every(item => {
                            return !item.isCheck
                        })) {
                            this.$toast('请选择体验产品');
                            return
                        }
                        var that = this;
                        this.tiProList.forEach(ele => {
                            if (ele.isCheck) {
                                that.tiYanForm.ids += ele.comExperId + ','
                            }
                        })
                        this.showTiyan = true
                        console.log(this.tiProList);
                        console.log(this.tiYanForm);
                    }
                },
            }
        })



    </script>

</body>

</html>